<template>
	<view class="content-baisc-layout">
		<view class="vip-show-area">
			<swiper class="swiper u-padding-top-30 u-padding-bottom-50" style="height: 260rpx" previous-margin="50rpx"
				next-margin="50rpx" display-multiple-items="1" :current="0" @change="levelChage">
				<swiper-item v-for="(v,k) in levelLists" :key="k" class="vip-card-item">
					<view class="u-padding-45 vip-content-area u-flex u-flex-col"
						:style="`background-image: url(${v.background_image});`">
						<view class="u-flex u-flex-row-center-center">
							<image :src="v.image" mode="widthFix" class="vip-icon"></image>
							<view class="vip-title u-padding-left-10 xxl" :style="`color: #${v.color};`">
								{{v.name||''}}
							</view>
						</view>

						<view class="progress">
							<u-line-progress :active-color="`#${v.color}`" :percent="v.diff_growth_percent*100"
								:height="10" :show-percent="false"></u-line-progress>
							<view class="xs u-color-666666">
								<text class="">{{v.current_level_status == 0 ? '当前高于该等级' : v.diff_growth_tips}}</text>
							</view>
						</view>
						<view class="">
							<view :style="`color: #${v.color};`" class="white flex nr">
								<view v-if="v.current_level_status == 1" class="row grade  sm">
									{{userInformation.vip_time}}</view>
								<view v-else-if="v.current_level_status == -1" class="row  sm ">未解锁</view>
								<view v-else-if="v.current_level_status == 0" class="row  sm ">已解锁</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="levelPrivilege.length > 0"
			class="u-border-radius-20 bg-white u-margin-top--20 u-padding-top-25 u-padding-bottom-25">
			<view class="u-flex  area-title xl bold">
				会员权益
			</view>

			<u-grid :col="3" :border="false">
				<u-grid-item v-if="(index <= 5 && !showStatus) || showStatus"
					v-for="(item,index) in levelPrivilege" :key="index">
					<u-icon :name="item.image" :size="100"></u-icon>
					<view class="grid-text u-padding-top-10">{{item.name||''}}</view>
				</u-grid-item>
			</u-grid>
			<view v-if="levelPrivilege.length > 6"
				class="u-flex u-col-center u-row-center c-DBB37A  xs" @click="showStatus = !showStatus">
				<view class="u-text-center u-padding-right-5">查看更多权益</view>
				<u-icon :name="showStatus?'arrow-up':'arrow-down'"></u-icon>
			</view>
		</view>

		<view
			class=" u-margin-top-25 u-border-radius-20 bg-white u-margin-top--20 u-padding-top-25 u-padding-bottom-25">
			<view class="u-flex  area-title xl bold u-margin-bottom-30">
				开通会员
			</view>

			<view class="vip-list-area u-flex u-flex-wrap vip-list-area-tow u-padding-left-20 u-padding-right-20">
				<view class="vip-item u-padding-bottom-14" v-for="(v,k) in vipLists" :key="k"
					@click="key = v.item_id" v-bind:class="{'selected':v.item_id == key}">
					<view class="u-text-right">
						<view class="lable xs white u-line-1" v-html="v.label" v-if="v.label.length >= 1"></view>
					</view>
					<view class="u-padding-20">
						<view class="title md u-line-1" v-html="v.spec_value_str"></view>
						<view class="price u-margin-top-32 u-line-1">
							<text class="icon">￥</text>
							<text class="xxxl">{{v.price}}</text>
						</view>
						<view class="hint u-line-1 xxs u-margin-top-14">
							￥{{v.market_price}}
						</view>
						<view
							class="hint-tow xs u-line-1 u-padding-top-5 u-padding-bottom-5 u-padding-left-20 u-padding-right-20 u-margin-top-32">
							{{v.hint}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-flex-1">

		</view>

		<view class="u-text-center u-color-666666 u-padding-top-16 u-padding-bottom-16">
			您是第1449800位访问者
		</view>
		<view class="footer-area">
			<view class="information u-flex u-row-between">
				<view class="xxs hint white" v-if="getInformation().hint">{{getInformation().hint}}</view>
				<view class="lg u-color-F3D7AF u-flex">
					<view class="price u-line-1 u-flex" style="align-items: baseline;">
						<text class="icon nr">￥</text>
						<text class="xl">{{getInformation().price}}</text>
					</view>
					<view class="price u-line-1 u-flex xs u-color-666666 line-through">
						￥{{getInformation().market_price}}
					</view>
				</view>
				<view class="affirm-btn  u-text-center lg" @tap="$u.throttle(purchase, 500)">
					立即开通
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<xy-loading v-if="loadingShowStatus"></xy-loading>
	</view>
</template>

<script>
	import {
		getLevelList
	} from '@/api/user';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		queryVipLists
	} from '@/api/store'
	import {
		prepay
	} from '@/api/app'
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	import {
		getUser
	} from '@/api/user'
	import {
		orderBuy,
	} from '@/api/order'
	import {
		toLogin,
		wxMnpLogin
	} from '@/utils/login'
	import {
		setTabbar
	} from '@/utils/tools'
	const app = getApp()
	export default {
		data() {
			return {
				key: 0,
				nowLevel: 0,
				vipLists: [],
				levelLists: [],
				showStatus: false,
				levelPrivilege: [],
				userInformation: [],
				loadingShowStatus: true
			};
		},
		onLoad() {
			this.queryVipListsDatas();
			this.queryLevelListDatas();
		},
		onPullDownRefresh() {
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
			})
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode
			};
		},
		methods: {
			levelChage(e) {
				this.nowLevel = e.detail.current;
				this.levelPrivilege = [];
				
				if(!this.$u.test.isEmpty(this.levelLists[this.nowLevel].level_privilege)){
					this.levelPrivilege = this.levelLists[this.nowLevel].level_privilege
				}
			},
			async queryVipListsDatas() {
				let res = await queryVipLists()
				if (res.code != 1) return;
				this.loadingShowStatus = false
				this.key = res.data[0].item_id;
				this.vipLists = res.data;
				
			},
			async queryLevelListDatas() {
				let d = await getLevelList();
				if (d.code != 1) return;
				this.levelLists = d.data.level_list
				this.userInformation = d.data.user
				if(!this.$u.test.isEmpty(this.levelLists[this.nowLevel].level_privilege)){
					this.levelPrivilege = this.levelLists[this.nowLevel].level_privilege
				}
			},
			// 		...mapActions(['getUser']),
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					uni.navigateTo({
						url: '/pages/bundle/user_profile/user_profile'
					});
					return;
				}
				toLogin()
			},

			goPage(url) {
				if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				});
			},
			purchase() {
				//#ifndef H5 || MP-WEIXIN 
				this.$refs.uToast.show({
					title: '请使用微信公众号支付',
					type: 'error'
				})
				// #endif
				//#ifdef  MP-WEIXIN 
				let res = wx.getSystemInfoSync();
				if (res.platform == 'ios') {
					return this.$refs.uToast.show({
						title: '请使用H5端进行开通会员',
						type: 'error'
					})
				}
				// #endif
				//#ifdef H5 || MP-WEIXIN 

				uni.showLoading({
					title: '加载中'
				});
				orderBuy({
					action: 'submit',
					item_id: this.key
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						prepay({
							from: res.data.type,
							order_id: res.data.order_id,
							pay_way: 1,
						}).then(res => {
							this.handleWechatPay(res.data);
						}).catch(err => {}).finally(() => {
							setTimeout(() => {
								this.loadingPay = false
							}, 500)
						})
					} else {
						throw new Error(msg)
					}
				})
				// #endif
			},
			// 微信支付
			handleWechatPay(data) {
				wxpay(data).then(res => {
					this.handPayResult(res)
				})
			},
			// 支付后处理
			handPayResult(result) {
				switch (result) {
					case 'success':
						uni.navigateBack()
						uni.$emit('payment', {
							result: true,
							order_id: this.order_id
						});
						break;
					case 'fail':
					default:
						uni.$emit('payment', {
							result: false,
							order_id: this.order_id
						})
				}
				// 页面出栈
			},
			getInformation() {
				const _this = this;
				let e = this.vipLists.filter(function(e) {
					return e.item_id == _this.key;
				})
				return e[0] || [];
			}
		},
		computed: {
			...mapGetters(["userInfo", "appConfig"])
		}
	};
</script>
<style lang="scss">
	@import './user_vip.scss'
</style>